<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="utf-8"/>
	    <title>Nick - Admin Pannel</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	    <meta name="description" content=""/>
	    <meta name="author" content=""/>
		
		<!-- fav icon -->
	    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>
	    
    	<!-- styles -->
	    <link href="/css/admin_common.css" rel="stylesheet"/>
	    <link href="/css/admin_home.css" rel="stylesheet"/>
	</head>
	
	<body>
		<div id="container" class="container">
			<header>
				<tal:block metal:use-macro="macro.tpl.php/header"></tal:block>
			</header>
			
			<div class="row">
				<div class="span385 column" id="span385">
					<tal:block metal:use-macro="macro.tpl.php/sideNav"></tal:block>
				</div><!-- /.span385 -->
				
				<div class="spanF725 column">
					<div class="rightPanel">
						<div class="tabsBg">
						    <a class="stretchBtn" id="strechMe" href="javascript:void(0);"><i class="toggleIcon"></i></a>
							<div class="tabs">
								<a rel="view-story" href="">List</a>
								<a rel="story-timeline" class="active" href="">Add New</a>
							</div><!-- /.tabs -->
						</div><!-- /.tabsBg -->
						<div id="rightElements">
							<div class="form">
								<div class="rightElements">
									<div class="title clearfix">
										<div class="fleft">
											<h2 class="fleft">Add Video</h2>
										</div>
									</div>
									
									<form method="post">
										<div class="row singleFieldContainer">
											<div class="column"><label class="fieldName required" for="videoName">Video Name</label></div>
											<div class="column"><input type="text" name="videoName" id="videoName"/></div>
										</div>
										<div class="row singleFieldContainer">
											<div class="column align-top"><label class="fieldName required" for="shortDescription">Description</label></div>
											<div class="column"><textarea name="shortDescription" rows="6" id="shortDescription"></textarea></div>
										</div>
										<div class="row singleFieldContainer">
											<div class="column"><label class="fieldName required" for="videoType">Video Type</label></div>
											<div class="column">
												<select name="relatedShow" id="videoType">
													<option value="">- Select Video Type -</option>
													<tal:block tal:repeat="single videoType"><option tal:attributes="value single/videoType" tal:content="single/videoType"></option></tal:block>
												</select>
											</div>
										</div>
										
										<div class="row singleFieldContainer addFiles">
											<div class="column align-top">
												<label class="fieldName required">Add Files</label>
											</div>
											<div class="column">
												<div class="row">
													<div class="column">
														<div class="row">
															<div class="column">
																<span class="required">Choose mp4 File</span>
															</div>
															<div class="column or"></div>
															<div class="column">
																<input type="file"></input>
															</div>
														</div>
													</div>
													<div class="column Or">
													</div>
													<div class="column">
														<div class="row">
															<div class="column">
																Map to file
															</div>
															<div class="column">
																<input type="text"></input>
															</div>
														</div>
													</div>
												</div>
												
												<div class="row">
													<div class="column">
														<div class="row">
															<div class="column">
																<span class="required">Choose ogv File</span>
															</div>
															<div class="column">
																<input type="file"></input>
															</div>
														</div>
													</div>
													<div class="column Or">
														Or
													</div>
													<div class="column">
														<div class="row">
															<div class="column">
																Map to file
															</div>
															<div class="column">
																<input type="text"></input>
															</div>
														</div>
													</div>
												</div>
												
												<div class="row">
													<div class="column">
														<div class="row">
															<div class="column">
																<span>Choose webM File</span>
															</div>
															<div class="column">
																<input type="file"></input>
															</div>
														</div>
													</div>
													<div class="column Or">
													</div>
													<div class="column">
														<div class="row">
															<div class="column">
																Map to file
															</div>
															<div class="column">
																<input type="text"></input>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										
										<div class="row singleFieldContainer">
											<div class="column"><label class="fieldName required">Related Show</label></div>
											<div class="column">
												<select name="relatedShow">
													<option value="">- Select one related show -</option>
													<tal:block tal:repeat="single relatedShow"><option tal:attributes="value single/name" tal:content="single/name"></option></tal:block>
												</select>
											</div>
										</div>
										
										<div class="row singleFieldContainer">
											<div class="column"><label class="fieldName required">Related Characters</label></div>
											<div class="column">
												<select name="relatedShow">
													<option value="">- Select one or more characters -</option>
													<tal:block tal:repeat="single relatedCharacters"><option tal:attributes="value single/name" tal:content="single/name"></option></tal:block>
												</select>
												
												<span class="single-label"><span class="text">Ninja Hattori</span><a class="close" href="javascript:void(0);">x</a></span>
											</div>
										</div>
										
										<div class="row singleFieldContainer">
											<div class="column"><label class="fieldName required">Related Category</label></div>
											<div class="column">
												<select name="relatedShow">
													<option value="">- Select one or more categories -</option>
													<tal:block tal:repeat="single relatedCategory"><option tal:attributes="value single/name" tal:content="single/name"></option></tal:block>
												</select>
											</div>
										</div>
										
										<div class="row singleFieldContainer">
											<div class="column align-top"><label class="fieldName required">Thumbnail Image</label></div>
											<div class="column">
												<div class="row">
													<div class="column zero">
														<input type="file"></input>
													</div>
													<div class="column">
														<div class="image-block fleft">
															<img class="block" src="http://www.nickindia.com/images/show/thumb/74_flash&thumb_img.jpg"></img>
															<div class="">
																<a href="">Edit</a> | <a href="">Crop Image</a>
															</div>
														</div>
														<span class="size fleft">size: 450 x 338</span>
													</div>
												</div>
											</div>
										</div>
										
										<div class="row singleFieldContainer">
											<div class="column"><label class="fieldName required">Make Live Date</label></div>
											<div class="column">
												<select name="relatedShow">
													<option value=""> Now </option><a href="javascript:void(0);"><i class="icon-calender"></i></a>
												</select>
											</div>
										</div>
										
										<div class="height20"></div>
										<div class="border"/>
										<div class="height20"></div>
										
										<div class="title clearfix">
											<div class="fleft">
												<h2 class="fleft">SEO</h2>
											</div>
										</div>
										
										<div class="row singleFieldContainer">
											<div class="column"><label class="fieldName required">Meta Title</label></div>
											<div class="column"><input type="text" name="metaTitle"/></div>
										</div>
										<div class="row singleFieldContainer">
											<div class="column align-top"><label class="fieldName required">Meta Description</label></div>
											<div class="column"><textarea name="metaDescription"/></div>
										</div>
										<div class="row singleFieldContainer">
											<div class="column align-top"><label class="fieldName required">Keywords</label></div>
											<div class="column"><textarea name="metaKeywords"/></div>
										</div>
										
										<div class="row singleFieldContainer">
											<div class="column">
											</div>
											<div class="column">
												<input type="submit" value="Preview" name="preview" class="btn-submit"/>
												<a href="javascript:void(0);" class="cancel">Cancel</a>
											</div>
										</div>
									</form>
								</div><!-- /.rightElements -->
							</div>
						</div><!-- /rightElements // to be filled by ajax -->
					</div><!-- /.rightPanel -->
				</div><!-- /.spanF725 -->
			</div><!-- /.row -->
			
			<footer>
				
			</footer>
		</div><!-- /.container -->
		
		<script type="text/javascript" src="/js/jquery-ui-1.9.1.js"></script>
		<script type="text/javascript" src="/js/jquery.datetimepicker.js"></script>
		<script type="text/javascript" src="/js/jquery_validate.js"></script>
		<script type="text/javascript" src="/js/common.js"></script>
		
	</body>
</html>
